<template>
	<div class="main balanceWrap">
		<scroller style="height: auto;">
			<div>
				<div style="width: 100%;height: 2.6rem;opacity: 0;"></div>
				<div class="balanceBox" ref="scrollerBottom">
					<div class="accordionWrap" v-for="(item,index) in collData" :key="index">
						<div style="padding: 0 0.3rem;box-sizing: border-box;">
							<div class="blBar11 flex-h" @click="Shrink(index,item)">
								<span class="flex1 sp1">
									<i :class="item.academyType==1?'ii1':item.academyType==2?'ii2':item.academyType==3?'ii3':'ii4'"></i>
									<b>{{item.academyType==1?'有希望':item.academyType==2?'很有希望':item.academyType==3?'很靠谱':'靠谱'}}</b>
									<em><em>{{item.selectCount}}选</em> <em v-show="item.academyType==1">{{item.selectCount>20?20:item.selectCount}}</em><em v-show="item.academyType==2 || item.academyType==3">{{item.selectCount>30?30:item.selectCount}}</em></em>
								</span>
								<img class="imgIcon" :src="item.state?imgup:imgdown" alt="">
							</div>
						</div>


						<div class="menuOrShow" :style="item.state?'':'height:0px;'" ref="AccordionBody">
							<div style="overflow: hidden;padding-bottom: 0.2rem;">
								<div class="barWrap" v-for="(its,$index) in item.reAcademies" :key='$index+10'>
									<div class="univsbox flex-h" v-on:click='openDetais(its)'>
										<div class="unlefts unlefts1">
											<span class="un1">NO.{{$index+1}}</span>
 
										</div>
										<div class="unright flex1">
											<span class="sch schoolName">{{its.academyNumber}}&nbsp;{{its.academyName }}</span>
											<span class="sch schLine schoolLine2">{{its.feature }}</span>
								
										</div>
									</div>
									<div class="univsboxSecond flex-h">
									
										<span class="flex1 sp1"><b :style="its.passFlag17===1?'color:@mainColor':''">2017</b><i :class="its.passFlag17===1?'bg-zj2 icons':'bg-zj1 icons'"></i></span>
										<span class="flex1 sp1"><b :style="its.passFlag18===1?'color:@mainColor':''">2018</b><i :class="its.passFlag18===1?'bg-zj2 icons':'bg-zj1 icons'"></i></span>
										<span class="sp2">{{its.classLimit}} </span>
									</div>
									<div class="subjectBoxWrap" style="height:auto" ref="subjectBody">
										<div style="overflow: hidden;">
											<div class="subjectBox">
												<div class="subjectBoxTop">
													<span class="r1">{{its.majorNumber}}&nbsp;{{its.majorName }}</span>
													<span class="r2">
														<b>学科评分 {{its.majorRank}}</b>
														<b>{{its.accordWithIntentionMajorFirst?"最有意向":its.accordWithIntentionMajorSecond?"有意向":its.accordWithIntentionMajorThird?"不排斥":""}}</b>
														<b>{{its.classicAcademy?'双一流学科':''}}</b>
													</span>
													<span class="r3">
														<b>2019年招生计划 {{its.plan==0?"--":its.plan }}</b>
														<b>学制 {{its.regime==""?"--":its.regime }}年</b>
														<b>学费 {{its.tuition==""?"--":its.tuition}}元/年</b>
													</span>
													<span class="r4">
														<b>2019年录取人数 {{its.count19?its.count19:'--'}}</b>
														<b class="b2">2019年最低位次 {{its.precedenceMin19}}</b>
													
													</span>
													<span class="r4">
														<b>2018年录取人数 {{its.count18}}</b>
														<b class="b2">2018年最低位次 {{its.precedenceMin18}}</b>

													</span>
													<span class="r4">
														<b>2017年录取人数 {{its.count17}}</b>
														<b class="b2">2017年最低位次 {{its.precedenceMin17}}</b>

													</span>
												</div>

											</div>
										</div>

									</div>
								</div>
							</div>

						</div>
					</div>

				</div>

				<div style="width: 100%;height: 150px;"></div>
			</div>
		</scroller>
	</div>

</template>
<script>
	import 'swiper/dist/css/swiper.css'
	import Swiper from 'swiper/dist/js/swiper.js';
	import ls from 'store2'
	export default {
		components: {

		},
		data() {
			return {
				imgup: require('~/static/images/volunteer_icon_allow_up.png'),
				imgdown: require('~/static/images/volunteer_icon_allow_down.png'),

				tabindex: 0,
				tabindex1: 1,
				tabindex2: 10,
				isShrink: false,
				isshow: 0,
				RightContent: '收缩',
				collData: []
			};
		},
		created() {
			let caseesData = ls.get('caseData' + this.$route.query.type);


			if (caseesData.length == 0) {
				this.$vux.toast.text('您的生成方案没有对应学校')
				return false;
			}
			caseesData.forEach(item => {
				item.state = false
				item.reAcademies.forEach(its => {
					its.type = false
				})
			})
			if (caseesData.length === 0) {
				return false;
			}

			if (caseesData[0].reAcademies.length > 0) {
				caseesData[0].state = true;
			} else if (caseesData[0].reAcademies.length == 0) {
				caseesData[1].state = true;
			} else if (caseesData[1].reAcademies.length == 0) {
				caseesData[2].state = true;
			} else if (caseesData[2].reAcademies.length == 0) {
				caseesData[3].state = true;
			}
			this.collData = caseesData
		},
		computed: {
			resultCategoryId() {
				return this.tabindex;
			},
			resultCategoryId1() {
				return this.tabindex1;
			},
			resultCategoryId2() {
				return this.tabindex2;
			}

		},
		mounted() {


		},
		methods: {
			openDetais(ite) {
				this.$emit("btnClick", ite)
			},
			getMajorsCik(its, index, code) {
				this.$emit("btnMajorClick", its, index, code)
			},

			courseSwips() {
				var mySwiper = new Swiper("#couSwiper2", {
					// scrollbar: '.swiper-scrollbar',

					direction: 'vertical',

					mousewheelControl: true,
					freeMode: true,
					// observer: true, //修改swiper自己或子元素时，自动初始化swiper
					// observeParents: true, //修改swiper的父元素时，自动初始化swiper
					// grabCursor:true,
					autoHeight: true,
					// autoplayDisableOnInteraction:false,

				});
			},
			majorClick(index, $index, its) {
				its.type = !its.type
				this.tabindex1 = $index;
				this.tabindex2 = index;
				let AllHiden1 = this.$refs.subjectBody[$index];
				let eleMoreHeight1 = AllHiden1.childNodes[0].offsetHeight;


			},
			Shrink(index, item) {

				let _this = this;
				this.tabindex = index;
				item.state = !item.state;
				let AllHiden = this.$refs.AccordionBody[index];
				let eleMoreHeight = AllHiden.childNodes[0].offsetHeight;
			}
		}
	};
</script>
<style scoped lang="less">
	.balanceWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;

		.balanceBox {
			width: 100%;
			height: auto;
			padding: 0.3rem 0rem;
			box-sizing: border-box;
			position: relative;


		}
	}

	.zhuantiBox {
		height: auto;
	}

	.accordionWrap {
		width: 100%;
		// min-height: 100vh;
		background: #fff;
		margin-bottom: 0.3rem;

		.blBar11 {
			width: 100%;
			height: 0.8rem;
			background: rgba(250, 250, 250, 1);
			border-radius: 0.1rem;
			padding: 0 0.2rem;
			box-sizing: border-box;

			.sp1 {
				height: 0.8rem;

				i,
				b,
				em {
					display: inline-block;
					vertical-align: middle;
				}

				i {

					width: 0.18rem;
					height: 0.25rem;

					border-radius: 0.09rem;

				}

				.ii1 {
					background: rgba(241, 116, 103, 1);
				}

				.ii2 {
					background: rgba(252, 200, 60, 1);
				}

				.ii3 {
					background: rgba(137, 204, 78, 1);
				}

				.ii4 {
					background: rgba(89, 127, 245, 1);
				}


				b {
					font-size: 0.34rem;

					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					line-height: 0.8rem;
					margin-left: 0.25rem;
				}

				em {
					
					line-height: 0.8rem;
					margin-left: 0.2rem;
					
					em{
						margin-left: 0;
						font-size: 0.3rem;
					font-weight: bold;
					color: rgba(187, 187, 187, 1);
					}
				}

			}

			.imgIcon {
				width: 0.4rem;
				height: 0.4rem;
			}

		}

		.menuOrShow {
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 0 0.3rem;
			box-sizing: border-box;
			// 哈哈

			position: relative;
			-webkit-transition: all 0.6s;
			-moz-transition: all 0.6s;
			-o-transition: all 0.6s;
			transition: all 0.6s;

			// transition-delay: 0.6s;
			.smBox {
				width: 100%;
				height: auto;
				background: red;
				margin-top: 0.3rem;

				.ssBoxWrap {
					width: 100%;
					overflow: hidden;
					height: auto;
				}
			}

		}

		.menuHei1 {
			height: auto;
		}

		.menuHei2 {
			height: 0;
		}
	}

	.barWrap {
		width: 98%;
		height: auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
		border-radius: 0.1rem;
		margin: 0.23rem auto 0;

		.univsbox {
			width: 100%;
			height: auto;

			-webkit-box-align: initial;
			-ms-flex-align: initial;
			align-items: initial;

			.unlefts {
				width: 1.5rem;
				height: auto;

				.un1 {
					display: block;
					margin-top: 0.25rem;
					width: 100%;
					height: 0.6rem;
					// background: rgba(244, 116, 103, 1);
					border-top-right-radius: 0.3rem;
					border-bottom-right-radius: 0.3rem;
					font-size: 0.34rem;
					font-family: 'DIN-Bold';
					font-weight: bold;
					// color: rgba(255, 255, 255, 1);
					line-height: 0.6rem;
					text-align: center;
				}

				.un2 {
					margin-left: 0.3rem;
					margin-top: 0.25rem;
					display: block;
					width: 1.2rem;
					height: 1.2rem;
					border-radius: 0.19rem;
					border: 1px solid rgba(238, 238, 238, 1);
					padding: 0.1rem 0;
					box-sizing: border-box;

					b,
					i {
						display: block;
						font-family: 'PingFangSC-Semibold';
						font-weight: 600;
						// color: rgba(244, 116, 103, 1);
						text-align: center;
					}

					b {
						height: 0.6rem;
						line-height: 0.6rem;
						font-size: 0.4rem;
					}

					i {
						height: 0.4rem;
						line-height: 0.4rem;
						font-size: 0.26rem;

					}
				}
			}

			.unlefts1 {
				.un1 {
					background: rgba(244, 116, 103, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(244, 116, 103, 1);
					}
				}
			}

			.unlefts2 {
				.un1 {
					background: rgba(252, 200, 60, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(252, 200, 60, 1)
					}
				}
			}

			.unlefts3 {
				.un1 {
					background: rgba(137, 204, 78, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(137, 204, 78, 1);
					}
				}
			}

			.unlefts4 {
				.un1 {
					background: rgba(89, 127, 245, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(89, 127, 245, 1);
					}
				}
			}

			.unright {
				width: 100%;
				height: auto;
				padding-left: 0.5rem;
				box-sizing: border-box;
				position: relative;

				.sch {
					display: block;
				}

				.schoolName {
					font-size: 0.34rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					line-height: 0.48rem;
					margin-top: 0.3rem;
					margin-bottom: 0.2rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.schLine {
					font-size: 0.26rem;
					margin-top: 0.1rem;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					line-height: 0.37rem;
				}

				.schoolBtn {
					position: absolute;
					width: 1.5rem;
					height: 0.6rem;
					background: #f7f7fa;
					border: 1px solid #e5e8ed;
					border-radius: 0.3rem;

					line-height: 0.6rem;
					text-align: center;
					right: 0.3rem;
					bottom: 0.41rem;

					b {
						font-size: 0.26rem;
						vertical-align: middle;
						// font-weight: bold;
						color: #666;
					}

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
						vertical-align: middle;
					}
				}
			}
		}

		.univsboxSecond {
			width:6.3rem;
			margin: 0 auto;
			height: 0.8rem;

			.sp1 {
				margin-right: 0.1rem;
				height: 0.6rem;
				text-align: center;
				line-height: 0.6rem;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 0.1rem 0px rgba(153, 153, 153, 0.2);
				border-radius: 0.08rem;
				
				b{
				font-size: 0.28rem;
				font-family: 'PingFangSC-Semibold';
				font-weight: 600;
				color: rgba(244, 116, 103, 1);	
				vertical-align: middle;
				}
				img{
					display: inline-block;
					width: 0.3rem;
					height: 0.3rem;
					vertical-align: middle;
					margin-left: 0.1rem;
				}
				.icons{
					vertical-align: middle;
					margin-left: 0.1rem;
				}
			}

			.sp2 {
				min-width: 2rem;
				height:0.6rem;
				background:rgba(255,255,255,1);
				box-shadow:0px 2px 0.1rem 0px rgba(153,153,153,0.2);
				border-radius:0.08rem;
				margin-right: 0;
				font-weight:400;
				color:rgba(34,34,34,1);
				text-align: center;
				font-size:0.26rem;
				 line-height: 0.6rem;
				 width: auto;
			}
		}

		.subjectBoxWrap {
			width: 100%;
			overflow: hidden;
			height: auto;
			padding-bottom: 0.2rem;

			.subjectBox {
				width: 6.3rem;
				height: auto;
				margin: 0 auto;
				background: #f7f7fa;
				border-radius: 0.1rem;
				margin-top: 0.2rem;
				padding: 0.3rem;
				box-sizing: border-box;

				.subjectBoxTop {

					.r1 {
						display: block;
						font-size: 0.3rem;
						font-family: 'PingFangSC-Semibold';
						font-weight: 600;
						color: rgba(34, 34, 34, 1);
						line-height: 0.4rem;
					
						
					}

					.r2,
					.r3,
					.r4 {
						display: block;
						margin-bottom: 0.15rem;
						b {
							font-size: 0.26rem;
							font-weight: 400;
							line-height: 0.4rem;
							margin-right: 0.15rem;
						}
					}

					.r2 {
						margin-top: 0.15rem;
						b {
							color: rgba(153, 153, 153, 1);
						}
					}

					.r3 {
						padding-bottom: 0.2rem;
						border-bottom:0.01rem solid rgba(229,232,237,1);
						b {
							color: rgba(34, 34, 34, 1);
						}
					}

					.r4 {
						b {
							color: rgba(34, 34, 34, 1);
						}
						.b2{
							margin-left: 0.5rem;
						}
					}
				}

			}
		}
	}
</style>
